﻿@model HomeCareLibrary.Core.Dtos.CRC_Task_DetailsDto


<!----------------------------------
            Custom Task
            -------------------------------->
<div class="custom-task">
    <div class="main-content">
        <div class="personalization-data customtask-data clearfix">
            @* <div class="top-icon-admin-extra clearfix">
                <div class="top-left-panel">
                  <div class="back-button"><a href="javascript:void(0);" id="btnBackCreateCustom"><img alt="back-btn" src="@Url.Content("~/images/customTask-img/back-btn.png")" class="back-btn">
                <div class="back-mob-btn"><span class="glyphicon glyphicon-chevron-left"></span> Back</div>
                </a></div>
                </div>
                <div class="top-right-panel">
                <img src="@Url.Content("~/images/customTask-img/plus sign.png")" alt="">
                </div>
              </div>*@
            @{
                  var sessionValue = "";
                  if (Session[HomeCareLibrary.Constants.SessionConstants.MODE]!=null)
                  {
                      sessionValue = Session[HomeCareLibrary.Constants.SessionConstants.MODE].ToString();
                  }
                  else{
                      sessionValue = "";
                  }
                      <input type="hidden" value="@sessionValue" id="hdnSessionValueTask" />
              }
          
            <div class="top-btn-per clearfix">
                <div class="back-button">
                    <a href="javascript:void(0);" id="btnBackCreateCustom">
                        <img alt="back-btn" src="@Url.Content("~/images/customTask-img/back-btn.png")" class="back-btn">
                        <div class="back-mob-btn"><span class="glyphicon glyphicon-chevron-left"></span>Back</div>
                    </a>
                </div>
                <div class="ques-button">
                    <a id="btnAdd" href="javascript:void(0);">
                        <img src="@Url.Content("~/images/customTask-img/plus sign.png")" alt="">
                    </a>

                </div>
            </div>

            <br />
            <h3 class="personalization-heading no-Txtshadow text-center"><strong>Create your own custom task</strong></h3>
            <br />
            <div class="custom-form">
                <div class="form-per">
                    <form id="TaskChangeForm" class="form-horizontal" method="post" action='@Url.Action("UpdateCustomTask", "Mtt")' role="form">



                        @Html.HiddenFor(m => Model.user_id)
                        @Html.HiddenFor(m => Model.home_number)
                        @Html.HiddenFor(m => Model.task_code)
                        @Html.HiddenFor(m => Model.image)
                        @Html.HiddenFor(m => Model.cycle_timing)
                        @Html.HiddenFor(m => Model.priority)
                        @Html.HiddenFor(m => Model.energy_savings_score)
                        @Html.HiddenFor(m => Model.cost_score)
                        @Html.HiddenFor(m => Model.type)
                        @Html.HiddenFor(m => Model.timing_months)
                        @Html.HiddenFor(m => Model.benefit_icons)
                        @Html.HiddenFor(m => Model.benefit_names)
                        @Html.HiddenFor(m => Model.cost_score)
                        @{  string[] monthName = Model.timing_months.Split(',');
                            string monthsName = string.Empty;
                            for (int i = 0; i < monthName.Length; i++)
                            {
                                monthsName += @System.Globalization.CultureInfo.GetCultureInfo("en-us").DateTimeFormat.GetMonthName(Convert.ToInt16(monthName[i])) + ", ";
                            }
                        }
                        <div class="form-group">
                            <label class="col-sm-4 col-xs-4 control-label" for="home">Home</label>
                            <div class="col-sm-6 col-xs-6">
                                @if (ViewBag.getSingleHomeName != null && ViewBag.getSingleHomeName != "")
                                {
                                    @ViewBag.getSingleHomeName
                                }
                                else
                                {
                                    @Html.DropDownList("getHomeName", null, new { @class = "form-control" })
                                }
                            </div>
                        </div>
                        <div class="form-group change-picture">
                            <label class="col-sm-4 col-xs-4 control-label">Picture Display</label>
                            <div class="col-sm-8 col-xs-8">
                                <span class="pic">
                                    <img id="imgTaskChange" src="@Url.Content("~/" + Model.image)" alt="@Model.image">
                                </span>
                                <span class="custom-arrow"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 col-xs-4 control-label" for="homefeature">Home Feature</label>
                            <div class="col-sm-8 col-xs-8">
                                @Html.TextBoxFor(m => Model.feature_name, new { @class = "form-control" })
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 col-xs-4 control-label" for="Description">Task Description</label>
                            <div class="col-sm-8 col-xs-8">
                                <textarea style="cursor: pointer" data-toggle="modal" data-target="#myModal12" id="task_description" name="task_description" class="form-control" cols="30" rows="3">@Model.task_description</textarea>
                                @*@Html.TextAreaFor(m => Model.task_description, new { @class = "form-control", @rows = "3"})*@
                                <div class="modal fade Benefits-popup TaskDes-popup" id="myModal12" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">

                                            <div class="modal-body">
                                                <textarea id="txtTaskDescription" class="form-control" rows="6">@Model.task_description</textarea>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default CancelBTN" data-dismiss="modal">Cancel</button>
                                                <button type="button" id="btnTaskDescriptionDone" data-dismiss="modal" class="btn btn-default OkBTN">Done</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group Months">
                            <label class="col-sm-4 col-xs-4 control-label">Months</label>
                            <div class="col-sm-8 col-xs-8">
                                <span id="spnMonthsSelected" class="blue">@monthsName.Substring(0, monthsName.Length - 2)</span>
                                <span class="custom-arrow Months-popupBTN" data-toggle="modal" data-target="#myModalMonths">
                                    <img src="@Url.Content("~/images/customTask-img/arrow-custom.png")" alt="" /></span>
                                <div class="modal fade Benefits-popup Months-popup" id="myModalMonths" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">

                                                <h3 class="modal-title text-center" id="myModalLabel">Months</h3>
                                                <p class="text-center txtBenefitsPopup">
                                                    Put a checkmark next to each month for 
when this task should be done
                                                </p>
                                            </div>
                                            <div class="modal-body">
                                                <ul class="list-unstyled Benefits-List">
                                                    <li>
                                                        <input type="checkbox" value="1" id="checkboxFiveInput111" data-text="January" class="popupMonths" name="" />
                                                        <label for="checkboxFiveInput111"></label>
                                                        January</li>
                                                    <li>
                                                        <input type="checkbox" value="2" id="checkboxFiveInput11" data-text="February" class="popupMonths" name="" />
                                                        <label for="checkboxFiveInput11"></label>
                                                        February</li>
                                                    <li>
                                                        <input type="checkbox" value="3" id="checkboxFiveInput21" data-text="March" class="popupMonths" name="" />
                                                        <label for="checkboxFiveInput21"></label>
                                                        March</li>
                                                    <li>
                                                        <input type="checkbox" value="4" id="checkboxFiveInput31" data-text="April" class="popupMonths" name="" />
                                                        <label for="checkboxFiveInput31"></label>
                                                        April</li>
                                                    <li>
                                                        <input type="checkbox" value="5" id="checkboxFiveInput41" data-text="May" class="popupMonths" name="" />
                                                        <label for="checkboxFiveInput41"></label>
                                                        May</li>
                                                    <li>
                                                        <input type="checkbox" value="6" id="checkboxFiveInput51" data-text="June" class="popupMonths" name="" />
                                                        <label for="checkboxFiveInput51"></label>
                                                        June</li>
                                                    <li>
                                                        <input type="checkbox" value="7" id="checkboxFiveInput61" data-text="July" class="popupMonths" name="" />
                                                        <label for="checkboxFiveInput61"></label>
                                                        July</li>
                                                    <li>
                                                        <input type="checkbox" value="8" id="checkboxFiveInput71" data-text="August" class="popupMonths" name="" />
                                                        <label for="checkboxFiveInput71"></label>
                                                        August</li>
                                                    <li>
                                                        <input type="checkbox" value="9" id="checkboxFiveInput81" data-text="September" class="popupMonths" name="" />
                                                        <label for="checkboxFiveInput81"></label>
                                                        September</li>
                                                    <li>
                                                        <input type="checkbox" value="10" id="checkboxFiveInput91" data-text="October" class="popupMonths" name="" />
                                                        <label for="checkboxFiveInput91"></label>
                                                        October</li>
                                                    <li>
                                                        <input type="checkbox" value="11" id="checkboxFiveInput101" data-text="November" class="popupMonths" name="" />
                                                        <label for="checkboxFiveInput101"></label>
                                                        November</li>
                                                    <li>
                                                        <input type="checkbox" value="12" id="checkboxFiveInput112" data-text="December" class="popupMonths" name="" />
                                                        <label for="checkboxFiveInput112"></label>
                                                        December</li>
                                                </ul>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default CancelBTN" id="btnMonthCancel" data-dismiss="modal">Cancel</button>
                                                <button type="button" class="btn btn-default OkBTN" id="btnMonthDone">OK</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group Cycle">
                            <label class="col-sm-4 col-xs-4 control-label">Cycle</label>
                            <div class="col-sm-6 col-xs-6">
                                @Html.DropDownList("getCycle", null, new { @class = "form-control popupCycle" })
                            </div>
                        </div>
                        <div class="form-group Priority">
                            <label class="col-sm-4 col-xs-4 control-label">Priority</label>
                            <div class="col-sm-6 col-xs-6">
                                <div style="cursor: pointer" data-toggle="modal" data-target="#myModal5" class="form-control customTask-Control">
                                    @if (Model.priority != null)
                                    {<img class="leftP-img imgPriority" src="@Url.Content("~/images/Priority_icons/priority icons" + Model.priority + ".png")" alt="" /> 
                                    }
                                    <img class="leftA-img" src="@Url.Content("~/images/arrow-btm.png")" alt="" />
                                </div>
                                <div class="modal fade Benefits-popup Priority-popup listingIconsPopoup" id="myModal5" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">

                                                <h3 class="modal-title text-center" id="myModalLabel">Priority</h3>
                                                <p class="text-center txtBenefitsPopup">
                                                    Select the priority you want
shown for this task
                                                </p>
                                            </div>
                                            <div class="modal-body">
                                                <ul class="list-unstyled Cost-List Cost-List listingIcons">
                                                    <li id="5" class="popupPriority"><a href="javascript:void(0);">
                                                        <img src="@Url.Content("~/images/Priority_icons/priority icons5.png")" alt="" /></a></li>
                                                    <li id="4" class="popupPriority"><a href="javascript:void(0);">
                                                        <img src="@Url.Content("~/images/Priority_icons/priority icons4.png")" alt="" /></a></li>
                                                    <li id="3" class="popupPriority"><a href="javascript:void(0);">
                                                        <img src="@Url.Content("~/images/Priority_icons/priority icons3.png")" alt="" /></a></li>
                                                    <li id="2" class="popupPriority"><a href="javascript:void(0);">
                                                        <img src="@Url.Content("~/images/Priority_icons/priority icons2.png")" alt="" /></a></li>
                                                    <li id="1" class="popupPriority"><a href="javascript:void(0);">
                                                        <img src="@Url.Content("~/images/Priority_icons/priority icons1.png")" alt="" /></a></li>
                                                    <li id="0" class="popupPriority"><a href="javascript:void(0);">
                                                        <img src="@Url.Content("~/images/Priority_icons/priority icons0.png")" alt="" /></a></li>
                                                </ul>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default CancelBTN" data-dismiss="modal" id="btnMYCancelPriority">Cancel</button>
                                                <button type="button" class="btn btn-default OkBTN" data-dismiss="modal" id="btnMYDonePriority">OK</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group Benefits">
                            <label class="col-sm-4 col-xs-4 control-label">Benefits</label>
                            <div class="col-sm-8 col-xs-8">
                                <ul id="ulBenefit" class="list-inline list-unstyled Benefits-data">
                                    @{ 
                                        if (Model.benefit_icons != null && Model.benefit_names != null)
                                        {
                                            string[] iconBenrfits = null;
                                            iconBenrfits = Model.benefit_icons.Split(',');
                                            string[] iconText = null;
                                            iconText = Model.benefit_names.Split(',');
                                            for (int i = 0; i < iconBenrfits.Length; i++)
                                            {
                                        <li><span>
                                            <img src="@iconBenrfits[i]" align="" /></span> <small>@iconText[i] </small></li>
                                       
                                            }
                                        }
                                    }
                                </ul>
                                <span class="custom-arrow Benefits-popupBTN" data-toggle="modal" data-target="#myModalBenefit">
                                    <img src="@Url.Content("~/images/customTask-img/arrow-custom.png")" alt="" /></span>
                                <!-- Modal -->
                                <div class="modal fade Benefits-popup" id="myModalBenefit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">

                                                <h3 class="modal-title text-center" id="myModalLabel">Benefits</h3>
                                                <p class="text-center txtBenefitsPopup">
                                                    Put a checkmark next to each benefit that 
applies to this task (up to 4 max.)
                                                </p>
                                            </div>
                                            <div class="modal-body">
                                                <ul class="list-unstyled Benefits-List">
                                                    <li>
                                                        <div class="pull-left">
                                                            <input type="checkbox" data-text=" Energy Savings" class="popupBenefit" value="http://www.home-wizard.com/icons_benefits/energy_savings.png" id="checkboxFiveInput" name="" />
                                                            <label for="checkboxFiveInput"></label>
                                                            <img class="BenefitsIcon" src="http://www.home-wizard.com/icons_benefits/energy_savings.png" alt="" />
                                                        </div>
                                                        <div class="BenefitsListData">Energy Savings</div>
                                                    </li>
                                                    <li>
                                                        <div class="pull-left">
                                                            <input type="checkbox" data-text="Safety & Health" class="popupBenefit" value="http://www.home-wizard.com/icons_benefits/health_safety.png" id="checkboxFiveInput1" name="" />
                                                            <label for="checkboxFiveInput1"></label>
                                                            <img class="BenefitsIcon" src="http://www.home-wizard.com/icons_benefits/health_safety.png" alt="" />
                                                        </div>
                                                        <div class="BenefitsListData">Safety & Health</div>
                                                    </li>
                                                    <li>
                                                        <div class="pull-left">
                                                            <input type="checkbox" value="http://www.home-wizard.com/icons_benefits/avoiding.png" data-text="Avoiding Unscheduled Repairs" class="popupBenefit" id="checkboxFiveInput2" name="" />
                                                            <label for="checkboxFiveInput2"></label>
                                                            <img class="BenefitsIcon" src="http://www.home-wizard.com/icons_benefits/avoiding.png" alt="" />
                                                        </div>
                                                        <div class="BenefitsListData">Avoiding Unscheduled Repairs</div>
                                                    </li>
                                                    <li>
                                                        <div class="pull-left">
                                                            <input type="checkbox" data-text="Comfort & Convenience" class="popupBenefit" value="http://www.home-wizard.com/icons_benefits/comfort.png" id="checkboxFiveInput3" name="" />
                                                            <label for="checkboxFiveInput3"></label>
                                                            <img class="BenefitsIcon" src="http://www.home-wizard.com/icons_benefits/comfort.png" alt="" />
                                                        </div>
                                                        <div class="BenefitsListData">Comfort & Convenience</div>
                                                    </li>
                                                    <li>
                                                        <div class="pull-left">
                                                            <input type="checkbox" data-text="Maintaining Value" class="popupBenefit" value="http://www.home-wizard.com/icons_benefits/extending.png" id="checkboxFiveInput4" name="" />
                                                            <label for="checkboxFiveInput4"></label>
                                                            <img class="BenefitsIcon" src="http://www.home-wizard.com/icons_benefits/extending.png" alt="" />
                                                        </div>
                                                        <div class="BenefitsListData">Maintaining Value</div>
                                                    </li>
                                                    <li>
                                                        <div class="pull-left">
                                                            <input type="checkbox" data-text="Appearance" class="popupBenefit" value="http://www.home-wizard.com/icons_benefits/appearance.png" id="checkboxFiveInput5" name="" />
                                                            <label for="checkboxFiveInput5"></label>
                                                            <img class="BenefitsIcon" src="http://www.home-wizard.com/icons_benefits/appearance.png" alt="" />
                                                        </div>
                                                        <div class="BenefitsListData">Appearance</div>
                                                    </li>
                                                    <li>
                                                        <div class="pull-left">
                                                            <input type="checkbox" data-text="Green <span>(saving water & recycling)</span>" class="popupBenefit" value="http://www.home-wizard.com/icons_benefits/green.png" id="checkboxFiveInput6" name="" />
                                                            <label for="checkboxFiveInput6"></label>
                                                            <img class="BenefitsIcon" src="http://www.home-wizard.com/icons_benefits/green.png" alt="" />
                                                        </div>
                                                        <div class="BenefitsListData">Green <span>(saving water & recycling)</span></div>
                                                    </li>
                                                    <li>
                                                        <div class="pull-left">
                                                            <input type="checkbox" value="http://www.home-wizard.com/icons_benefits/saving_money.png" data-text="Saving Money <span>(beyond energy)</span>" class="popupBenefit" id="checkboxFiveInput7" name="" />
                                                            <label for="checkboxFiveInput7"></label>
                                                            <img class="BenefitsIcon" src="http://www.home-wizard.com/icons_benefits/saving_money.png" alt="" />
                                                        </div>
                                                        <div class="BenefitsListData">Saving Money <span>(beyond energy)</span></div>
                                                    </li>
                                                    <li>
                                                        <div class="pull-left">
                                                            <input type="checkbox" class="popupBenefit" data-text="Space Management <span>(including decluttering)</span>" value="http://www.home-wizard.com/icons_benefits/space.png" id="checkboxFiveInput8" name="" />
                                                            <label for="checkboxFiveInput8"></label>
                                                            <img class="BenefitsIcon" src="http://www.home-wizard.com/icons_benefits/space.png" alt="" />
                                                        </div>
                                                        <div class="BenefitsListData">Space Management <span>(including decluttering)</span></div>
                                                    </li>
                                                    <li>
                                                        <div class="pull-left">
                                                            <input type="checkbox" value="http://www.home-wizard.com/icons_benefits/allergy_control.png" data-text="Allergy Control" class="popupBenefit" id="checkboxFiveInput9" name="" />
                                                            <label for="checkboxFiveInput9"></label>
                                                            <img class="BenefitsIcon" class="BenefitsIcon" src="http://www.home-wizard.com/icons_benefits/allergy_control.png" alt="" />
                                                        </div>
                                                        <div class="BenefitsListData">Allergy Control</div>
                                                    </li>
                                                    <li>
                                                        <div class="pull-left">
                                                            <input type="checkbox" value="http://www.home-wizard.com/icons_benefits/children.png" data-text="Especially for Children" class="popupBenefit" id="checkboxFiveInput10" name="" />
                                                            <label for="checkboxFiveInput10"></label>
                                                            <img class="BenefitsIcon" src="http://www.home-wizard.com/icons_benefits/children.png" alt="" />
                                                        </div>
                                                        <div class="BenefitsListData">Especially for Children</div>
                                                    </li>
                                                    <li>
                                                        <div class="pull-left">
                                                            <input type="checkbox" value="http://www.home-wizard.com/icons_benefits/elderly.png" data-text="Especially for Elderly" class="popupBenefit" id="checkboxFiveInput13" name="" />
                                                            <label for="checkboxFiveInput13"></label>
                                                            <img class="BenefitsIcon" src="http://www.home-wizard.com/icons_benefits/elderly.png" alt="" />
                                                        </div>
                                                        <div class="BenefitsListData">Especially for Elderly</div>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default CancelBTN" data-dismiss="modal" id="btnMYCancel">Cancel</button>
                                                <button type="button" class="btn btn-default OkBTN" id="btnMYDone">OK</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 col-xs-4 control-label" for="Description">Benefits Comments</label>
                            <div class="col-sm-8 col-xs-8">
                                @Html.TextAreaFor(m => Model.benefit_content, new { @class = "form-control", @rows = "3" })
                            </div>
                        </div>
                        <div class="form-group Energy-Savings">
                            <label class="col-sm-4 col-xs-4 control-label">Energy Savings</label>
                            <div class="col-sm-6 col-xs-6">
                                <div style="cursor: pointer" data-toggle="modal" data-target="#myModalEnergySaving" class="form-control customTask-Control">
                                    @if (Model.energy_savings_score != null)
                                    {
                                        <img class="leftP-img imgES"  src="@Url.Content("~/images/energy_savings2/energy savings icons" + Model.energy_savings_score + ".png")" alt="" />     
                                    }
                                    <img class="leftA-img" src="@Url.Content("~/images/arrow-btm.png")" alt="" />
                                </div>

                                <div class="modal fade Benefits-popup EnergyS-popup listingIconsPopoup" id="myModalEnergySaving" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">

                                                <h3 class="modal-title text-center" id="myModalLabel">Energy Savings</h3>
                                                <p class="text-center txtBenefitsPopup">
                                                    Select what you want displayed for the 
energy savings from doing this task
                                                </p>
                                            </div>
                                            <div class="modal-body">
                                                <ul class="list-unstyled Cost-List Cost-List listingIcons">
                                                    <li id="5" class="popupES"><a href="javascript:void(0);">
                                                        <img src="@Url.Content("~/images/energy_savings2/energy savings icons5.png")" alt="" /></a></li>
                                                    <li id="4" class="popupES"><a href="javascript:void(0);">
                                                        <img src="@Url.Content("~/images/energy_savings2/energy savings icons4.png")" alt="" /></a></li>
                                                    <li id="3" class="popupES"><a href="javascript:void(0);">
                                                        <img src="@Url.Content("~/images/energy_savings2/energy savings icons3.png")" alt="" /></a></li>
                                                    <li id="2" class="popupES"><a href="javascript:void(0);">
                                                        <img src="@Url.Content("~/images/energy_savings2/energy savings icons2.png")" alt="" /></a></li>
                                                    <li id="1" class="popupES"><a href="javascript:void(0);">
                                                        <img src="@Url.Content("~/images/energy_savings2/energy savings icons1.png")" alt="" /></a></li>
                                                    <li id="0" class="popupES"><a href="javascript:void(0);">
                                                        <img src="@Url.Content("~/images/energy_savings2/energy savings icons0.png")" alt="" /></a></li>
                                                </ul>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default CancelBTN" id="btnMYCancelEnerySavings" data-dismiss="modal">Cancel</button>
                                                <button type="button" id="btnMYDoneEnerySavings" data-dismiss="modal" class="btn btn-default OkBTN">OK</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 col-xs-4 control-label" for="ESComments">Energy Savings Comments</label>
                            <div class="col-sm-8 col-xs-8">
                                @Html.TextAreaFor(m => Model.energy_savings_content, new { @class = "form-control", @rows = "3" })
                            </div>
                        </div>
                        <div class="form-group Cost">
                            <label class="col-sm-4 col-xs-4 control-label">Cost</label>
                            <div class="col-sm-6 col-xs-6">
                                <div style="cursor: pointer" data-toggle="modal" data-target="#myModalCost" class="form-control customTask-Control">
                                    @if (Model.cost_score != null)
                                    {<img class="leftP-img imgCost" src="@Url.Content("~/images/costs_icons/costs icons" + Model.cost_score + ".png")" alt="" />  }
                                    <img class="leftA-img " src="@Url.Content("~/images/arrow-btm.png")" alt="" />
                                </div>
                                <div class="modal fade Benefits-popup cost-popup listingIconsPopoup" id="myModalCost" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">

                                                <h3 class="modal-title text-center" id="myModalLabel">Cost</h3>
                                                <p class="text-center txtBenefitsPopup">
                                                    Select what you want displayed 
for the cost of doing this task
                                                </p>
                                            </div>
                                            <div class="modal-body">
                                                <ul class="list-unstyled Cost-List Cost-List listingIcons">
                                                   @foreach (var objES in ViewBag.getEnergySavings)
                                                { 
                                                     <li id="@objES.Value" class="popupCost"><a href="javascript:void(0);">
                                                        <img src="@Url.Content("~/images/costs_icons/costs icons"+ objES.Value+".png")" alt="" /></a></li>
                                                   }
                                                   @* <li id="4"><a href="javascript:void(0);">
                                                        <img src="images/costs_icons/costs icons4.png" alt="" /></a></li>
                                                    <li id="3"><a href="javascript:void(0);">
                                                        <img src="images/costs_icons/costs icons3.png" alt="" /></a></li>
                                                    <li id="2"><a href="javascript:void(0);">
                                                        <img src="images/costs_icons/costs icons2.png" alt="" /></a></li>
                                                    <li id="1"><a href="javascript:void(0);">
                                                        <img src="images/costs_icons/costs icons1.png" alt="" /></a></li>
                                                    <li id="0"><a href="javascript:void(0);">
                                                        <img src="images/costs_icons/costs icons0.png" alt="" /></a></li>*@
                                                </ul>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default CancelBTN" id="btnMYCancelCost" data-dismiss="modal">Cancel</button>
                                                <button type="button" class="btn btn-default OkBTN" data-dismiss="modal" id="btnMYDoneCost">OK</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 col-xs-4 control-label" for="CComments">Cost Comments</label>
                            <div class="col-sm-8 col-xs-8">
                                @Html.TextAreaFor(m => Model.cost_content, new { @class = "form-control", @rows = "3" })
                            </div>
                        </div>
                        <div class="form-group Type">
                            <label class="col-sm-4 col-xs-4 control-label">Type</label>
                            <div class="col-sm-6 col-xs-6">
                                   <div style="cursor:pointer" data-toggle="modal" data-target="#myModalType" class="form-control customTask-Control">
                                @switch (Model.type)
                                {
                                    case 1:
                                    <span class="lblType">inside</span>
                                        break;
                                    case 2:
                                    <span class="lblType">outside</span>
                                        break;
                                    case 3:
                                    <span class="lblType">other</span>
                                        break;
                                    default:
                                    <span class="lblType">inside</span>
                                        break;
                                }
                                 <img class="leftA-img" src="@Url.Content("~/images/arrow-btm.png")" alt="" /> 
                              </div>
                                  <div class="modal fade Benefits-popup Type-popup listingIconsPopoup" id="myModalType" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
       
        <h3 class="modal-title text-center" id="myModalLabel">Priority</h3>
        <p class="text-center txtBenefitsPopup">Select what you want displayed for
the type of task</p>
      </div>
      <div class="modal-body">
      <ul class="list-unstyled Cost-List Cost-List listingIcons">
           @foreach (var objType in ViewBag.getType)
                                                { 
              
                <li  id="@objType.Value"  class="popupType"><a href="javascript:void(0);">@objType.Text</a></li>}
     @* <li><a href="javascript:void(0);">Inside</a></li>
      <li class="selected"><a href="javascript:void(0);">Outside</a></li>
      <li><a href="javascript:void(0);">Other</a></li>*@
     
        </ul>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default CancelBTN" data-dismiss="modal" id="btnMYCancelType">Cancel</button>
        <button type="button" class="btn btn-default OkBTN" data-dismiss="modal" id="btnMYDoneType">OK</button>
      </div>
    </div>
  </div>
</div>
                            </div>
                        </div>
                        <div class="button smallBtn" style="margin-left: 33%;">
                            <button id="btnSave" class="btn-per" type="submit">Save</button>
                        </div>
                        @*Modal Popup For Benefit Icon*@
                        @*<div class="modal fade bs-modal-benefit" id="myModalBenefit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                        <h4 class="modal-title" id="myModalBenefits">Benefits</h4>
                                    </div>
                                    <div class="modal-body">
                                        <div class="row">
                                            Put a checkmark next to each benefit that applies to this task (up to 4 max).
            <br />
                                            <br />
                                            <ul>
                                                @foreach (var objBenefit in ViewBag.Benefits)
                                                {            
                                                    <li>
                                                        <input type="checkbox" data-src="@objBenefit.ben_icon_url" data-text="@objBenefit.benefit_name" value="@objBenefit.ben_icon_url" class="popupBenefit"/>
                                                        &nbsp;&nbsp;
                        @objBenefit.benefit_name
                                                        &nbsp;&nbsp;
                         <img src="@Url.Content(objBenefit.ben_icon_url)" alt="" />
                                                    </li>
                                                }
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" id="btnMYDone">Done</button>
                                        <button data-dismiss="modal" class="btn btn-default" id="btnMYCancel" type="button">Cancel</button>
                                    </div>
                                </div>
                                <!-- /.modal-content -->
                            </div>
                            <!-- /.modal-dialog -->
                        </div>*@

                        @*Modal Popup For cycle*@
                        <div class="modal fade bs-modal-cycle" id="myModalCycle" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                        <h4 class="modal-title" id="myModalCycles">Cycle</h4>
                                    </div>
                                    <div class="modal-body">
                                        <div class="row">
                                            Select the timing cycle for this task:
            <br />
                                            <br />
                                            <ul>
                                                @foreach (var objCycle in ViewBag.getCycle)
                                                {            
                                                    <li id="@objCycle.Value" class="popupCycle">@objCycle.Text</li>
                                                }
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal" id="btnMYDoneCycle">Done</button>
                                        <button data-dismiss="modal" class="btn btn-default" id="btnMYCancelCycle" type="button">Cancel</button>
                                    </div>
                                </div>
                                <!-- /.modal-content -->
                            </div>
                            <!-- /.modal-dialog -->
                        </div>
                        <!-- /.modal -->

                        <!-- /.modal -->
                        @*Modal Popup For EnergySaving*@
                        @*  <div class="modal fade bs-modal-es" id="myModalEnergySaving" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                        <h4 class="modal-title" id="myModalEnergySavings">Energy Savings</h4>
                                    </div>
                                    <div class="modal-body">
                                        <div class="row">
                                            Select what you want displayed for the energy savings from doing task.
            <br />
                                            <br />
                                            <ul>
                                                @foreach (var objES in ViewBag.getEnergySavings)
                                                {            
                                                    <li id="@objES.Value" class="popupES">
                                                        <img src="@Url.Content("~/images/task/energysavings" + @objES.Value + ".png")" alt="" style="width: 25.66%;height:auto;"></li>
                                                }
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal" id="btnMYDoneEnerySavings">Done</button>
                                        <button data-dismiss="modal" class="btn btn-default" id="btnMYCancelEnerySavings" type="button">Cancel</button>
                                    </div>
                                </div>
                                <!-- /.modal-content -->
                            </div>
                            <!-- /.modal-dialog -->
                        </div>*@
                        <!-- /.modal -->
                        @*Modal Popup For Cost*@
                     @*   <div class="modal fade bs-modal-cost" id="myModalCost" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                        <h4 class="modal-title" id="myModalCosts">Cost</h4>
                                    </div>
                                    <div class="modal-body">
                                        <div class="row">
                                            Select what you want displayed for the cost of doing this task.
            <br />
                                            <br />
                                            <ul>
                                                @foreach (var objCS in ViewBag.getCostScore)
                                                {            
                                                    <li id="@objCS.Value" class="popupCost">
                                                        <img src="@Url.Content("~/images/task/costs icons" + @objCS.Value + ".png")" alt="" style="width: 25.66%;height:auto;">
                                                    </li>
                                                }
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal" id="btnMYDoneCost">Done</button>
                                        <button data-dismiss="modal" class="btn btn-default" id="btnMYCancelCost" type="button">Cancel</button>
                                    </div>
                                </div>
                                <!-- /.modal-content -->
                            </div>
                            <!-- /.modal-dialog -->
                        </div>*@
                        <!-- /.modal -->
                        @*Modal Popup For Type*@
                     @*   <div class="modal fade bs-modal-type" id="myModalType" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                        <h4 class="modal-title" id="myModalTypes">Type</h4>
                                    </div>
                                    <div class="modal-body">
                                        <div class="row">
                                            Select what you want displayed for the type of task.
            <br />
                                            <br />
                                            <ul>
                                                @foreach (var objType in ViewBag.getType)
                                                {            
                                                    <li id="@objType.Value" class="popupType">@objType.Text</li>
                                                }
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal" id="btnMYDoneType">Done</button>
                                        <button data-dismiss="modal" class="btn btn-default" id="btnMYCancelType" type="button">Cancel</button>
                                    </div>
                                </div>
                                <!-- /.modal-content -->
                            </div>
                            <!-- /.modal-dialog -->
                        </div>*@
                        <!-- /.modal -->
                        @*Modal Popup For Check Months*@
                        <div aria-hidden="true" aria-labelledby="mySmallModalLabel" role="dialog" id="monthCheck" tabindex="-1" class="modal fade bs-modal-sm" style="display: none;">
                            <div class="modal-dialog modal-sm">
                                <div class="modal-content" style="text-align: center;">
                                    <div class="modal-header">
                                        <h3>Home Wizard</h3>
                                    </div>
                                    <div class="modal-body">
                                        At least one month must be selected.
                                    </div>
                                    <div class="modal-footer">
                                        <button data-dismiss="modal" class="btn btn-default" type="button">Ok</button>
                                    </div>
                                </div>
                                <!-- /.modal-content -->
                            </div>
                            <!-- /.modal-dialog -->
                        </div>
                        <div aria-hidden="true" aria-labelledby="mySmallModalLabel" role="dialog" id="benefitCheck" tabindex="-1" class="modal fade bs-modal-sm" style="display: none;">
                            <div class="modal-dialog modal-sm">
                                <div class="modal-content" style="text-align: center;">
                                    <div class="modal-header">
                                        <h3>Home Wizard</h3>
                                    </div>
                                    <div class="modal-body">
                                        The maximum benefits that can be selected is 4.
                                    </div>
                                    <div class="modal-footer">
                                        <button data-dismiss="modal" class="btn btn-default" type="button">Ok</button>
                                    </div>
                                </div>
                                <!-- /.modal-content -->
                            </div>
                            <!-- /.modal-dialog -->
                        </div>
                    </form>
                    <br />
                    <br />
                </div>
            </div>
        </div>
    </div>
</div>
<!----------------------------------
           End
            -------------------------------->
<script type="text/javascript">


    $(function () {
        checkForIphone();
    });


    function checkForIphone() {

        if ($("#hdnSessionValueTask").val() != '') {
            if ($("#hdnSessionValueTask").val() == "@HomeCareLibrary.Constants.ApplicationModeConstants.IPHONE_APP" || $("#hdnSessionValueTask").val() == "@HomeCareLibrary.Constants.ApplicationModeConstants.IPAD_APP") {

                $(".mobileMenu").hide();
            }
        }

    }


    //Months Bind checkBoxes
    function month(names) {
        $(".popupMonths").each(function (index) {
            var monthName = names;
            var currentValue = $(this).val();
            if (monthName.indexOf(currentValue) >= 0) {
                $(this).attr('checked', true);
            }
            else {
                $(this).attr('checked', false);
            }
        });
    }

    //Priority Bind
    function popupPriority(priority) {
        $(".popupPriority").each(function (index) {
            var Priority = priority;
            var currentValue = $(this).attr('id');
            if (Priority.indexOf(currentValue) >= 0) {
                $(this).addClass("selected");
            }
            else {
                $(this).removeClass("selected");
            }
        });
    }

    // ES Bind
    function popupES(score) {
        $(".popupES").each(function (index) {
            var ES = score;
            var currentValue = $(this).attr('id');
            if (ES.indexOf(currentValue) >= 0) {
                $(this).addClass("selected");
            }
            else {
                $(this).removeClass("selected");
            }
        });
    }

    function popupCost(costScore) {
        //Cost Bind
        $(".popupCost").each(function (index) {
            var Cost = costScore;
            var currentValue = $(this).attr('id');
            if (Cost.indexOf(currentValue) >= 0) {
                $(this).addClass("selected");
            }
            else {
                $(this).removeClass("selected");
            }
        });

    }

    function popupType(typ) {
        //Type Bind
        $(".popupType").each(function (index) {
            var Type = typ;
            var currentValue = $(this).attr('id');
            if (Type.indexOf(currentValue) >= 0) {
                $(this).addClass("selected");
            }
            else {
                $(this).removeClass("selected");
            }
            if (typ == 0) {
                $(".popupType").first().addClass("selected");
            }
        });
    }

    //Benefits
    function popupBenefit(ben, nam) {
        $(".popupBenefit").each(function (index) {
            var Benefit = ben;
            var benName = name;
            var currentValue = $(this).val();
            if (Benefit.indexOf(currentValue) >= 0 && benName.indexOf(currentValue) >= 0) {
                $(this).attr('checked', true);

            }
            else {
                $(this).attr('checked', false);
            }
        });
    }
    jQuery(document).ready(function () {
        month($("#timing_months").val());
        popupPriority($("#priority").val());
        popupES($("#energy_savings_score").val());
        popupCost($("#cost_score").val());
        popupType($("#type").val());
        popupBenefit($("#benefit_icons").val(), $("#benefit_names").val());

        $("#btnMonthCancel").live("click", function () {
            month($("#timing_months").val());
        });
        $("#btnMYCancelPriority").live("click", function () {
            popupPriority($("#priority").val());
        });
        $("#btnMYCancelEnerySavings").live("click", function () {
            popupES($("#energy_savings_score").val());
        });
        $("#btnMYCancelCost").live("click", function () {
            popupCost($("#cost_score").val());
        });
        $("#btnMYCancelType").live("click", function () {
            popupType($("#type").val());
        });
        $("#btnMYCancel").live("click", function () {
            popupBenefit($("#benefit_icons").val(), $("#benefit_names").val());
        });

        $("#btnMonthDone").live("click", function () {

            var selectedMonthsValue = "";
            var selectedMonthsName = "";
            $(".popupMonths").each(function () {
                if ($(this).attr('checked')) {
                    selectedMonthsValue += $(this).val() + ",";
                    selectedMonthsName += $(this).attr("data-text") + ", ";
                }
            });

            if (selectedMonthsValue != "") {
                $("#spnMonthsSelected").text(selectedMonthsName.substring(0, selectedMonthsName.length - 2));
                $("#timing_months").val(selectedMonthsValue.substring(0, selectedMonthsValue.length - 1));
                $('#myModalMonths').modal('hide');
            }
            else {
                $('#monthCheck').modal('show');
                return false;
            }
        });
        $("#btnMYDone").live("click", function () {
            var selectedBenefitValue = "";
            var selectedBenefitName = "";
            var seletedBenefitIcon = "";
            $(".popupBenefit").each(function () {
                if ($(this).attr('checked')) {
                    selectedBenefitValue += $(this).val() + ",";
                    selectedBenefitName += $(this).attr("data-text") + ",";
                    seletedBenefitIcon += $(this).val() + ","
                }
            });
            var benefitValueArray = [];
            var benefitNameArray = [];
            var benefitIconArray = [];
            benefitValueArray = selectedBenefitValue.substring(0, selectedBenefitValue.length - 1).split(',');
            benefitNameArray = selectedBenefitName.substring(0, selectedBenefitName.length - 1).split(',');
            benefitIconArray = seletedBenefitIcon.substring(0, seletedBenefitIcon.length - 1).split(',');
            if (benefitValueArray.length <= 4) {
                $("#ulBenefit").html('');
                for (var i = 0; i < benefitValueArray.length; i++) {
                    $("#ulBenefit").append("<li><span><img src='" + benefitIconArray[i] + "' align='' /></span> <small>" + benefitNameArray[i] + " </small></li>");
                }
                $("#benefit_names").val(selectedBenefitName.substring(0, selectedBenefitName.length - 1));
                $("#benefit_icons").val(seletedBenefitIcon.substring(0, seletedBenefitIcon.length - 1));
                $('#myModalBenefit').modal('hide');
            }
            else {
                $('#benefitCheck').modal('show');
                return false;
            }
        });

        $('.popupCycle').change(function () {

            $("#cycle_timing").val($(this).val());
        });
        $('#getHomeName').change(function () {

            $("#home_number").val($(this).val());
        });


        $(".popupPriority").live("click", function () {
            $(".popupPriority").each(function () {
                $(".popupPriority").removeClass("selected");

            })
            $(this).addClass("selected");

        });
        $("#btnMYDonePriority").live("click", function () {

            $(".popupPriority").each(function () {
                if ($(this).hasClass("selected")) {
                    var value = $(this).attr('id')
                    $("#priority").val(value);
                    $(".imgPriority").attr("src", "/images/Priority_icons/priority icons" + value + ".png");
                }
            })
        });


        $(".popupES").live("click", function () {
            $(".popupES").each(function () {
                $(".popupES").removeClass("selected");

            })
            $(this).addClass("selected");

        });
        $("#btnMYDoneEnerySavings").live("click", function () {
            $(".popupES").each(function () {
                if ($(this).hasClass("selected")) {
                    var value = $(this).attr('id')
                    $("#energy_savings_score").val(value);
                    $(".imgES").attr("src", "/images/energy_savings2/energy savings icons" + value + ".png");
                    return false;
                }
            });

        });

        $(".popupCost").live("click", function () {
            $(".popupCost").each(function () {
                $(".popupCost").removeClass("selected");

            })
            $(this).addClass("selected");

        });
        $("#btnMYDoneCost").live("click", function () {
            $(".popupCost").each(function () {
                if ($(this).hasClass("selected")) {
                    var value = $(this).attr('id')
                    $(".imgCost").attr("src", "/images/costs_icons/costs icons" + value + ".png");
                    $("#cost_score").val(value);
                    return false;
                }
            });
        });
        $(".popupType").live("click", function () {
            $(".popupType").each(function () {
                $(".popupType").removeClass("selected");

            })
            $(this).addClass("selected");

        });
        $("#btnMYDoneType").live("click", function () {
            $(".popupType").each(function () {
                if ($(this).hasClass("selected")) {
                    var value = $(this).attr('id')
                    $(".lblType").text($(this).children('a').html());
                    $("#type").val(value);
                    return false;
                }
            });
        });




        $("#btnAdd").live("click", function () {
            var currentMonth = (new Date).getMonth() + 1;
            var months = new Array(12);
            months[0] = "January";
            months[1] = "February";
            months[2] = "March";
            months[3] = "April";
            months[4] = "May";
            months[5] = "June";
            months[6] = "July";
            months[7] = "August";
            months[8] = "September";
            months[9] = "October";
            months[10] = "November";
            months[11] = "December";
            $("#timing_months").val(currentMonth);
            $("#spnMonthsSelected").text(months[currentMonth - 1]);
            $('#getCycle').val(1);
            $("#cycle_timing").val(1);
            $("#priority").val(3);
            $(".imgPriority").attr("src", "/images/task/3_star.png");
            $("#ulBenefit").html('');
            $("#ulBenefit").append("<li><span><img src='http://www.home-wizard.com/icons_benefits/extending.png' align='' /></span> <small>Maintaining Value </small></li>");
            $("#benefit_icons").val("http://www.home-wizard.com/icons_benefits/extending.png")
            $("#benefit_names").val("Maintaining Value");
            $("#feature_name").val("");
            $("#task_description").val("");
            $("#benefit_content").val("");
            $("#energy_savings_score").val("");
            $(".imgES").attr("src", "/images/energy_savings2/energy savings icons0.png");
            $("#energy_savings_content").val("");
            $(".imgCost").attr("src", "/images/costs_icons/costs icons3.png");
            $("#cost_score").val(3);
            $("#cost_content").val("");
            $("#lblType").text("Inside");
            $("#type").val(1);

        });
    });
</script>

<script>
    $("#btnTaskDescriptionDone").live("click", function () {
        $("#task_description").val($("#txtTaskDescription").val());
    });
</script>
